<template>
    <div class="box">
        <h3>会员收藏统计</h3>
        <!--为echarts准备一个具备大小的容器dom-->
        <div id="main" style="width: 800px; height: 400px"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            charts: "",
            opinion: [],
            opinionData: [],
        };
    },
    methods: {
        drawPie(id) {
            this.charts = echarts.init(document.getElementById(id));
            this.charts.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{a}：{b}<br/>收藏数量：{c} ({d}%)",
                },
                legend: {
                    orient: "vertical",
                    x: "left",
                    data: this.opinion,
                },
                series: [
                    {
                        name: "会员姓名",
                        type: "pie",
                        radius: ["40%", "70%"],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                show: true,
                                fontSize: '27',
                                fontWeight: 'bold'

                            },
                        },
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: this.opinionData,
                    },
                ],
            });
        },
        getClasses() {
            this.$api.vipApi.getAllMembers().then(({ data }) => {
                // console.log(data);
                let arr = data.data
                arr.forEach(v => {
                    this.opinion.push(v.nickName)
                    this.opinionData.push({ value: v.mycollect.length, name: v.nickName })
                });
                this.drawPie("main");
            })

        }
    },
    created() {
        this.getClasses()
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.box {
    background-color: #fff;
    padding: 10px;
    width: 570px;
    /* height: 400px; */
}
</style>